<DemoContainer>
	<ApexChart TItem="SupportIncident"
			   Title="Incident Severity"
			   Options="options">

		@foreach (var source in incidents.GroupBy(e => e.Source).OrderBy(e => e.Key))
		{
			<ApexPointSeries TItem="SupportIncident"
							 Items="source.OrderBy(e=>e.WeekNumber)"
							 Name="@source.Key.ToString()"
							 SeriesType="SeriesType.Heatmap"
							 Color="@GetColor(source.Key)"
							 ShowDataLabels="true"
							 XValue="@(e => e.WeekName)"
							 YAggregate="@(e => (int)e.Average(a=>a.Severity))" />
		}

	</ApexChart>
</DemoContainer>

@code {
	private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents();
	private ApexChartOptions<SupportIncident> options = new ApexChartOptions<SupportIncident>
	{
		DataLabels = new DataLabels
		{
			Style = new DataLabelsStyle
			{
				Colors = ["function(opts) { return (opts.series[opts.seriesIndex][opts.dataPointIndex] < 30) ? '#00f' : '#f00'; }"],
			},
		},
	};

	private string GetColor(IncidentSource source)
	{
		switch (source)
		{
			case IncidentSource.Internal:
				return "#FF0000";
			case IncidentSource.ThirdParty:
				return "#0000FF";
			case IncidentSource.Integration:
				return "#FF00FF";
			default:
				return "#008FFB";
		}
	}
}